@charset "UTF-8";
@import "../mixins/index.scss";
@import "../variables/default.scss";

@include prefix(timeline) {
  &-item {
    position: relative;
    padding: 0 0 $spacing-v-sm;

    &__content {
      margin-left: $jlf-timeline-offset-left;
      min-height: 56px;
      color: $jlf-timeline-title-color;
      font-size: $jlf-timeline-title-font-size;
      line-height: $line-height-zh;
      text-align: left;
      &-item {
        font-size: 18px;
      }
      &--sub {
        color: $jlf-timeline-desc-color;
        font-size: $jlf-timeline-desc-font-size;
        line-height: 30px;
      }
    }

    &__dot,
    &__icon {
      position: absolute;
      left: 0;
      top: 5px;
      width: $jlf-timeline-dot-size;
      height: $jlf-timeline-dot-size;
      font-size: 0;
      text-align: center;
      vertical-align: middle;
      border-radius: $border-radius-circle;
      background: $jlf-timeline-dot-color;
      box-sizing: border-box;
      z-index: 1;

      .jlf-icon {
        font-size: $jlf-timeline-dot-size;
      }
    }

    &__dot {
      &::after {
        content: "";
        display: inline-block;
        box-sizing: border-box;
        width: $jlf-timeline-dot-size;
        height: $jlf-timeline-dot-size;
        border: 1px solid transparent;
        border-radius: $border-radius-circle;
        // border-color: $jlf-timeline-dot--border-color;
        background-color: $jlf-timeline-dot--border-color;
      }
      &.jlf-timelime-item__icon {
        &::after {
          border-color: transparent;
        }
      }
    }

    &__icon {
      color: $jlf-timeline-dot--border-color;
    }

    &__tail {
      position: absolute;
      top: calc($jlf-timeline-dot-size / 2);
      bottom: calc($jlf-timeline-dot-size / 2);
      left: calc($jlf-timeline-dot-size / 2 - 1px);
      border-left: 1px solid $jlf-timeline-line-color;
    }

    &--blue {
      .jlf-timeline-item__icon {
        color: $color-success;
      }
      .jlf-timeline-item__dot {
        &::after {
          border-color: $jlf-timeline-dot--border-color;
          // border-color: $color-success;
        }
      }
    }
    &--red {
      .jlf-timeline-item__icon {
        color: $color-error;
      }
      .jlf-timeline-item__dot {
        &::after {
          border-color: $color-error;
          background-color: $color-error;
        }
      }
    }
    &--yellow {
      .jlf-timeline-item__icon {
        color: $color-error;
      }
      .jlf-timeline-item__dot {
        &::after {
          border-color: $color-warning;
          background-color: $color-warning;
        }
      }
    }
  }

  &-item {
    &:last-child {
      .jlf-timeline-item__tail {
        display: none;
      }
    }
  }
  &--pending {
    .jlf-timeline-item:nth-child(2) {
      .jlf-timeline-item__content {
        min-height: 80px;
      }
      .jlf-timeline-item__tail {
        border-left-style: dotted;
      }
    }
  }
}
